* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #517fa4, #243949);
}

.container {
    width: 1000px;
    height: 700px;
    ul {
        list-style: none;
        /* 相对定位，这个很重要，如果没有这个，下面两个absolute脱离文档流，就没有占位了，ul就不会居中了，这里用上relative不是为了使用这个属性，而是为了占位 */
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        // /* 平均分布宽度 */
        justify-content: space-around;
        /* 让子元素在Y轴的最下面排列 */
        align-items: flex-end;
        li {
            width: 200px;
            cursor: pointer;
            // 小图
            img {
                width: 100%;
                height: 110px;
                border: 5px solid transparent;
            }
            @for $i from 1 to 6 {
                &:nth-child(#{$i}):hover {
                    ~ .big-img {
                        background-image: url('../../images/op1/' + $i + '.jpg');
                    }
                    ~ .frame {
                        /* 鼠标移入小图，改变移动框的位置 */
                        left: (($i - 1) * 200px);
                    }
                }
            }
        }
        // 大图
        .big-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000px;
            height: 550px;
            background: url('../../images/op1/1.jpg') no-repeat;
            background-size: cover;
            background-position: center;
        }
        // 移动框
        .frame {
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 200px;
            height: 110px;
            border: 5px solid #fff;
            /* 这里有一个bug闪烁 加上这个属性可以让移动框不会被鼠标捕捉到 */
            pointer-events: none;
            /* 移动框上的三角形 */
            transition: 0.4s;
            &::before {
                content: '';
                position: absolute;
                width: 30px;
                height: 15px;
                background-color: #fff;
                // 计算居中
                left: calc(50% - 15px);
                top: -18px;
                // 裁切出一个三角形
                clip-path: polygon(0 100%, 50% 0, 100% 100%);
            }
        }
    }
}
